<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>锄大地计分器</title>
  <!-- 引入样式文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.net/vant/4.8.2/index.min.css"/>
  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  <script src="https://cdn.staticfile.net/vue/3.3.4/vue.global.prod.min.js"></script>
  <script src="https://cdn.staticfile.net/vant/4.8.2/vant.min.js"></script>

  <style>

    .page_bottom {
      padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */
      padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2 */
    }

    html,
    body,
    #app {
      height: 100%;
    }

    #app {

    }

    .btns-wrap {

      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 10px;
    }

    .table-wrap {
    }

    .table-header {
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #ada7a7;
      background-color: #1989fa;
      color: #fff;
    }

    .table-item {
      flex: 1;
      padding: 10px 0;
      font-size: 14px;
      text-align: center;


    }

    .table-body {
      padding-bottom: 61px;
    }

    .table-body-ul {
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #ccc;
    }

    .table-body-ul:last-child {
      border-bottom: none;
    }

    .table-body .table-item {
      font-weight: bold;
      font-size: 16px;
    }

    .total-bottom {
      width: 100%;
      position: fixed;
      bottom: 0;
      padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
      padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #73bee9;
    }

    .total-bottom-item {
      padding: 10px 0;
      font-weight: bold;
      flex: 1;
      text-align: center;
    }

    .pick-header {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
    }

    .pick-header-item {
      flex: 1;
      text-align: center;
    }

    #app .van-picker-column__item--selected {
      color: forestgreen !important;
      font-weight: bold;

    }
  </style>
</head>

<body>
<div id="app">
  <van-sticky style="z-index: inherit;">

    <div class="btns-wrap">
      <div>
        <van-button style="margin-right:10px" type="danger" size="small" @click="reset">重新开始</van-button>
        <van-button size="small" @click="show=true">添加数量</van-button>

      </div>
      <van-button type="primary" size="small" @click="showPicker=true">添加</van-button>
    </div>
  </van-sticky>

  <div class="table-wrap" ref="container">
    <van-sticky :offset-top="52">
      <div>
        <div class="table-header">
          <div class="table-item" style="flex:0 0 50px;color:#ccc" @click="handleClickId(asc1)">
            id
            <span v-show="asc1===true">
                        <van-icon name="arrow-down"/>
                    </span>
            <span v-show="asc1!==true">
                        <van-icon name="arrow-up"/>
                    </span>
          </div>
          <div class="table-item">{{user.user1}}</div>
          <div class="table-item">{{user.user2}}</div>
          <div class="table-item">{{user.user3}}</div>
          <div class="table-item">{{user.user4}}</div>
        </div>
      </div>
    </van-sticky>


    <div class="table-body">

      <van-swipe-cell v-for="(item,index) in list" :key="item.id">
        <div class="table-body-ul">

          <div class="table-item" style="flex:0 0 50px;color:#ccc">{{!asc1?index+1:list.length-index}}</div>

          <div class="table-item" :style="{color:c.number>=8?'red':c.number===0?'#2fb52f':''}"
               v-for="c in item.data" :key="c.id">

                            <span v-if="item.type==='ADD_TOTAL'" style="color: rgb(22, 81, 219);">
                                {{Math.abs(c.total)}}
                            </span>
            <template v-else>
              <span v-if="c.number!==0">{{Math.abs(c.total)}}({{c.number}})</span>
              <span v-else>胜利</span>
            </template>

          </div>
        </div>
        <template #right>
          <van-button square type="danger" text="删除" @click="del(item)"/>
        </template>
      </van-swipe-cell>

    </div>
  </div>

  <div class="total-bottom">
    <div class="total-bottom-item" style="text-align: center;color: #1a2fb4;flex:0 0 50px" @click="handlebalance">
        <div style="margin-bottom: 3px;font-size: 12px">数量</div>
        <div style="font-size: 16px">结算</div>
    </div>
    <div class="total-bottom-item" v-for="(item,index) in totalJIFen" :key="index"
    >
      <div style="margin-bottom: 5px;font-size: 12px">{{(Math.abs(item))}}</div>
      <div :style="{color: balance[index]>=0?'green':'red'}">{{balance[index]}}</div>
    </div>
  </div>

  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker title="添加" :columns="columns" v-model="selectColumns" :swipe-duration="500" @confirm="onConfirm"
                @cancel="onCancel">
      <template #columns-top>
        <div class="pick-header">
          <div class="pick-header-item">{{user.user1}}</div>
          <div class="pick-header-item">{{user.user2}}</div>
          <div class="pick-header-item">{{user.user3}}</div>
          <div class="pick-header-item">{{user.user4}}</div>
        </div>
      </template>
    </van-picker>
  </van-popup>

  <van-dialog v-model:show="show" title="添加数量" :show-confirm-button="false">
    <div style="margin-top: 10px">
      <van-form @submit="onSubmit">
        <van-cell-group inset style="border: 1px solid #ccc;margin-bottom:10px">
          <van-field v-model="form.user1" name="user1" label-width="50px" type="number" :label="user.user1"
                     placeholder="请输入"/>
        </van-cell-group>
        <van-cell-group inset style="border: 1px solid #ccc;margin-bottom:10px">
          <van-field v-model="form.user2" name="user2" label-width="50px" type="number" :label="user.user2"
                     placeholder="请输入"/>
        </van-cell-group>
        <van-cell-group inset style="border: 1px solid #ccc;margin-bottom:10px">
          <van-field v-model="form.user3" name="user3" label-width="50px" type="number" :label="user.user3"
                     placeholder="请输入"/>
        </van-cell-group>
        <van-cell-group inset style="border: 1px solid #ccc;margin-bottom:10px">
          <van-field v-model="form.user4" name="user4" label-width="50px" type="number" :label="user.user4"
                     placeholder="请输入"/>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
        <div style="margin: 16px;">
          <van-button round block @click="show=false">
            取消
          </van-button>
        </div>
      </van-form>
    </div>


  </van-dialog>


</div>

<script>
  const DATA_LIST = 'DATA_LIST'

  function genID(length) {
    return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36);
  }

  const COLUMNS = [
    {text: '胜利', value: 0},
    {text: '1', value: 1},
    {text: '2', value: 2},
    {text: '3', value: 3},
    {text: '4', value: 4},
    {text: '5', value: 5},
    {text: '6', value: 6},
    {text: '7', value: 7},
    {text: '8', value: 8},
    {text: '9', value: 9},
    {text: '10', value: 10},
    {text: '11', value: 11},
    {text: '12', value: 12},
    {text: '13', value: 13},
  ]
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello World!',
        list: [],
        selectColumns: [0, 0, 0, 0],
        showPicker: false,
        columns: [
          COLUMNS.slice(),
          COLUMNS.slice(),
          COLUMNS.slice(),
          COLUMNS.slice(),
        ],
        user: {},
        show: false,
        form: {
          user1: '',
          user2: '',
          user3: '',
          user4: '',
        },
        asc1: true, // asc升序
      }
    },
    computed: {
      totalJIFen() {
        const ary = [0, 0, 0, 0]
        if (this.list) {
          this.list.forEach(item => {
            item.data.forEach((f, findex) => {
              ary[findex] = ary[findex] + f.total
            })
          })
        }
        console.log(ary,'====ary')
        return ary
      },
      // 统计分数
      balance() {
        const total = this.totalJIFen.map(item => Math.abs(item))
        const user0 = (total[1] - total[0]) + (total[2] - total[0]) + (total[3] - total[0])
        const user1 = (total[0] - total[1]) + (total[2] - total[1]) + (total[3] - total[1])
        const user2 = (total[0] - total[2]) + (total[1] - total[2]) + (total[3] - total[2])
        const user3 = (total[0] - total[3]) + (total[1] - total[3]) + (total[2] - total[3])
        return [user0, user1, user2, user3]
      }
    },
    mounted() {
      this.user = JSON.parse(localStorage.getItem("USERNAME"))
      if (!this.user) {
        window.location.replace('c_name.html')
        return
      }
      this.list = (JSON.parse(localStorage.getItem(DATA_LIST)) || [])
      this.$nextTick(() => {
        this.container = this.$refs.container
        console.log(this.container)
      })

    },
    methods: {
      // 计算积分
      computedNumber(number) {
        const num = Number(number)
        if (num < 8) {
          return num
        } else if (num >= 8 && num < 10) {
          return num * 2
        } else if (num >= 10 && num < 13) {
          return num * 3
        } else if (num === 13) {
          return num * 4
        }
      },
      addData(obj) {
        if (this.asc1) {
          this.list.unshift(obj)
        } else {
          // 滚动到最底部
          this.list.push(obj)
          this.$nextTick(()=>{
            window.scrollTo(0, document.body.scrollHeight + 57)

          })
        }
      },
      onConfirm({selectedValues}) {
        const _this = this
        const filterData = selectedValues.filter(item => !!item)
        if (filterData.length === 0 || filterData.length < 3) {
          vant.showToast('胜利只能是一个玩家!')
          return
        }
        if (filterData.length === 4) {
          vant.showToast('必须有个胜利者!')
          return
        }


        const totalAry = selectedValues.map(item => -_this.computedNumber(item))
        const ary = selectedValues.map((item, index) => {
          if (item == 0) { // 如果胜利就0积分
            return {
              id: genID(10),
              total: 0,
              number: item, // 数量
            }
          }
          return {
            id: genID(10),
            total: -this.computedNumber(item),
            number: item, // 数量
          }
        })
        const obj = {
          id: genID(8),
          data: ary
        }

        this.addData(obj)
        localStorage.setItem(DATA_LIST, JSON.stringify(this.list))
        vant.showNotify({type: 'success', message: '添加成功！'});
        this.showPicker = false

        this.selectColumns = [0, 0, 0, 0]
      },
      onCancel() {
        vant.showToast('取消')
        this.showPicker = false
      },
      del(item) {
        vant.showConfirmDialog({
          title: '提示',
          message:
            '是否删除当前数据？',
        })
          .then(() => {
            // on confirm
            const index = this.list.findIndex(f => f.id === item.id)
            this.list.splice(index, 1)
            localStorage.setItem(DATA_LIST, JSON.stringify(this.list))
          })
          .catch(() => {
            // on cancel
          });
      },
      reset() {
        vant.showConfirmDialog({
          title: '提示',
          message:
            '是否要重新开始游戏？',
        })
          .then(() => {
            localStorage.clear()
            window.location.replace('c_name.html')
          })
          .catch(() => {
            // on cancel
          });
      },
      handleClickId(bol) {
        this.asc1 = !bol
        this.list = this.list.reverse()
      },
      // 添加总分
      onSubmit(e) {
        console.log(e)
        if (e.user1 && e.user2 && e.user3 && e.user4) {
          this.addData({
            id: genID(8),
            type: 'ADD_TOTAL', // 增加总分
            data: [{
              id: genID(10),
              total: -Math.abs(parseInt(e.user1)),
              number: 0, // 数量
            }, {
              id: genID(10),
              total: -Math.abs(parseInt(e.user2)),
              number: 0, // 数量
            }, {
              id: genID(10),
              total: -Math.abs(parseInt(e.user3)),
              number: 0, // 数量
            }, {
              id: genID(10),
              total: -Math.abs(parseInt(e.user4)),
              number: 0, // 数量
            }]
          })

          this.form = {
            user1: '',
            user2: '',
            user3: '',
            user4: '',
          }
          localStorage.setItem(DATA_LIST, JSON.stringify(this.list))
          this.show = false
          vant.showNotify({type: 'success', message: '添加总分成功！'});
        }


      },
      // 结算分数
      handlebalance() {
        const total = this.totalJIFen.map(item => Math.abs(item))
        const user0 = (total[1] - total[0]) + (total[2] - total[0]) + (total[3] - total[0])
        const user1 = (total[0] - total[1]) + (total[2] - total[1]) + (total[3] - total[1])
        const user2 = (total[0] - total[2]) + (total[1] - total[2]) + (total[3] - total[2])
        const user3 = (total[0] - total[3]) + (total[1] - total[3]) + (total[2] - total[3])
        console.log(user0, user1, user2, user3)
      }
    }
  })
  //
  app.use(vant);
  //
  // // 通过 CDN 引入时不会自动注册 Lazyload 组件
  // // 可以通过下面的方式手动注册
  app.use(vant.Lazyload);
  app.mount('#app')
</script>


</body>

</html>
